<template>
  <el-dialog title="确认删除" v-model="dialogVisible" width="30%">
    <span>确定要删除【{{ name }}】吗？此操作不可恢复。</span>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="danger" @click="confirmDelete">确认删除</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 控制弹窗显示
const dialogVisible = ref(false)

// 管理员名用于显示
const name = ref('')

// 删除 ID 和回调函数
let id = null
let callback = null

const open = (row, delCallback) => {
  return new Promise((resolve, reject) => {
    if (!row) {
      console.warn('未传入管理员数据')
      reject('没有数据')
      return
    }

    name.value = row.name || row.username
    id = row.id
    callback = async (id) => {
      try {
        const res = await delCallback(id)
        ElMessage.success(res.msg || '删除成功')
        resolve(res)
      } catch (err) {
        ElMessage.error('删除失败')
        reject(err)
      } finally {
        dialogVisible.value = false
      }
    }

    dialogVisible.value = true
  })
}


const confirmDelete = async () => {
  if (callback) {
    await callback(id)
  }
}



// 暴露 open 方法给父组件调用
defineExpose({ open })
</script>